<html>
  <head>
     <script type="text/javascript" src="../dojo1.7/dojo/dojo.js"></script>
     <script>
     dojo.require("dojox.gauges.AnalogGauge");
     dojo.require("dojox.gauges.AnalogArrowIndicator");


     function init(){
       var gauge;
       var ranges1 = [ {low:5, high:10, hover:'5 - 10'},
         {low:10, high:20, hover:'10 - 20'},
         {low:20, high:30, hover:'20 - 30'},
         {low:30, high:40, hover:'30 - 40'},
         {low:40, high:50, hover:'40 - 50'},
         {low:50, high:60, hover:'50 - 60'},
         {low:60, high:70, hover:'60 - 70'},
         {low:70, high:75, hover:'70 - 75'}
       ];
       gauge = dojo.byId('defaultGauge');
       gauge = new dojox.gauges.AnalogGauge({
         id: "defaultGauge",
         width: 300,
         height: 200,
         cx: 150,
         cy: 175,
         radius: 125,
         ranges: ranges1,
         minorTicks: {
           offset: 125,
           interval: 5,
           length: 5,
           color: 'gray'
         },
         majorTicks: {
           offset: 125,
           interval: 10,
           length: 10
         },
         indicators: [
           new dojox.gauges.AnalogArrowIndicator({
             value:17,
             width: 3,
             hover:'Value: 17',
             title: 'Value'
          }),
          new dojox.gauges.AnalogLineIndicator({
            value:6,
            color:'#D00000',
            width: 3,
            hover:'Target: 6',
            title: 'Target'
          })
         ]
       }, gauge);
       gauge.startup();
     }
     dojo.ready(init);
     </script>
  </head>
  <body>
    <div id="defaultGauge"></div>
  </body>
</html>